<template>
	<!-- 云店信息编辑 -->
	<view class="flashOpen-main">
		<uni-notice-bar show-icon text="提示门店入驻成功，会自动开通第三方配送和第三方分账功能" />
		<view class="flashOpen-form">
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="创客昵称" required :label-width="90">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入创客昵称" />
				</uni-forms-item>
				<uni-forms-item label="联系人姓名" required :label-width="90">
					<uni-easyinput v-model="baseFormData.contact_name" placeholder="请输入联系人姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系人电话" required :label-width="90">
					<uni-easyinput v-model="baseFormData.contact_phone" type="tel" placeholder="请输入联系人电话" />
				</uni-forms-item>
				<uni-forms-item label="创客头像" required :label-width="90">
					<uni-file-picker limit="1" :auto-upload="true" v-model="logo_value" fileMediatype="image" mode="grid" @select="select" @delete="delIMG"></uni-file-picker>
				</uni-forms-item>
				<uni-forms-item label="所在区域" required :label-width="90">
					<view class="regionBox" @click="openAddress">
						<text v-if="addressInfo">
							{{ addressInfo }}
						</text>
						<text style="color: #999" v-else>请选择所在地</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="详细地址" required :label-width="90">
					<view class="address">
						<uni-easyinput v-model="baseFormData.address" placeholder="请输入门店详细地址" />
						<uni-icons type="location" size="26" style="margin-left: 20rpx" color="#555" @click="addressShow = true"></uni-icons>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- 地址选择 -->
		<hwxcAddressSelection
			@subAddress="getSubAddress"
			@changeAddress="getChange"
			ref="addressRef"
			:provinceId="baseFormData.province_id"
			:cityId="baseFormData.city_id"
			:areaId="baseFormData.district_id"
			:provinceListData="provinceList"
			:cityListData="cityList"
			:areaListData="areaList"
		/>

		<u-popup :show="addressShow" @close="getClose" :closeable="true">
			<hwxcGdMap @closeMap="getClose" @subMap="getsubMap" />
		</u-popup>

		<view class="flashOpen-sub active" @click="getcloudManageEdit">保存编辑</view>
		<view class="flashOpen-sub" @click="gotoPath" v-if="!eidtType">返回首页</view>
	</view>
</template>

<script>
import { commonArea } from '../../../api/home/index.js';
import { flashManageEdit, flashManageInfo } from '../../../api/flashManage/index.js';
import { BASE_URL } from '../../../api/baseurl.js';
import { imageUrl,validatePhoneNumber } from '../../../utils/tools.js';
import { hwxcGdMap } from '../../../components/hwxcGdMap/hwxcGdMap.vue';
import hwxcAddressSelection from '../../../components/hwxcAddressSelection/hwxcAddressSelection.vue';
export default {
	data() {
		return {
			baseFormData: {
				name: '',
				contact_name: '',
				contact_phone: '',
				image: '',
				province_id: '',
				city_id: '',
				district_id: '',
				address: '',
				type: '2'
			},
			tokenValue: '',
			// 门店logo
			logo_value: [],
			addressShow: false,
			addressInfo: null,

			provinceList: [],
			cityList: [],
			areaList: [],

			eidtType: false
		};
	},

	async onLoad(option) {
		const { type } = option;
		if (type) {
			this.eidtType = true;
		}
		await this.getflashManageInfo();
		await this.getcommonArea();
		await this.getAddressInfo();
		this.tokenValue = (await uni.getStorageSync('token')) || '';
	},

	components: {
		hwxcAddressSelection,
		hwxcGdMap
	},

	methods: {
		async getcommonArea() {
			try {
				const provinceData = await commonArea();
				if (provinceData.code == 1) {
					this.provinceList = provinceData.data;
					const cityData = await commonArea({
						pid: this.baseFormData.province_id || this.provinceList[0].id
					});
					if (cityData.code == 1) {
						this.cityList = cityData.data;
						const areaData = await commonArea({
							pid: this.baseFormData.city_id || this.cityList[0].id
						});
						if (areaData.code == 1) {
							this.areaList = areaData.data;
						}
					}
				}
			} catch (e) {
				throw Error(e);
			}
		},

		getSubAddress() {
			this.getAddressInfo();
		},

		async getChange(info) {
			if (info.type == 'province') {
				this.baseFormData.province_id = info.id;
				const cityData = await commonArea({
					pid: this.baseFormData.province_id
				});
				this.cityList = cityData.data;
				this.areaList = [];
			} else if (info.type == 'city') {
				this.baseFormData.city_id = info.id;
				const areaData = await commonArea({
					pid: this.baseFormData.city_id
				});
				this.areaList = areaData.data;
			} else if (info.type == 'area') {
				this.baseFormData.district_id = info.id;
			}
		},

		// 详细地址信息
		async getAddressInfo() {
			if (this.baseFormData.district_id) {
				let provinceInfo = this.provinceList.filter((item) => {
					if (item.id == this.baseFormData.province_id) {
						return item;
					}
				});

				let cityInfo = this.cityList.filter((item) => {
					if (item.id == this.baseFormData.city_id) {
						return item;
					}
				});

				let areaInfo = this.areaList.filter((item) => {
					if (item.id == this.baseFormData.district_id) {
						return item;
					}
				});

				this.addressInfo = provinceInfo[0].name + '/' + cityInfo[0].name + '/' + areaInfo[0].name;
			} else {
				this.addressInfo = '';
			}
		},

		// 保存编辑
		async getcloudManageEdit() {
			if (!this.baseFormData.name) {
				return uni.showToast({
					title: '药店名称不能为空',
					icon: 'none'
				});
			}
			
			if (!this.baseFormData.contact_name) {
				return uni.showToast({
					title: '联系人不能为空',
					icon: 'none'
				});
			}
			
			if (!this.baseFormData.contact_phone) {
				return uni.showToast({
					title: '联系人电话不能为空',
					icon: 'none'
				});
			}
			
			if (!validatePhoneNumber(this.baseFormData.contact_phone)) {
				return uni.showToast({
					title: '电话格式错误',
					icon: 'none'
				});
			}

			if (this.logo_value.length == 0) {
				return uni.showToast({
					title: '请上传药店logo',
					icon: 'none'
				});
			}

			this.baseFormData.image = this.logo_value[0].fullurl;
			try {
				const resData = await flashManageEdit(this.baseFormData);
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
				setTimeout(() => {
					if (!this.eidtType) {
						uni.navigateTo({
							url: '/pages/storeSide/makerApplicationAuth/makerApplicationAuth'
						});
					} else {
						uni.navigateBack(-1);
					}
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},

		// 门店信息获取
		async getflashManageInfo() {
			try {
				const resData = await flashManageInfo({
					type: '2'
				});
				this.baseFormData = resData.data;
				if(this.baseFormData.image){
				this.logo_value = [
					{
						url: imageUrl(this.baseFormData.image),
						fullurl: this.baseFormData.image
					}
				];
				}
			} catch (e) {
				throw Error(e);
			}
		},

		// 返回首页
		gotoPath() {
			uni.switchTab({
				url: '/pages/nationwideDelivery/nationwideDelivery'
			});
		},

		//图片上传
		select(e) {
			let filePath = e.tempFilePaths[0];
			uni.uploadFile({
				url: BASE_URL + 'common/upload',
				filePath: filePath,
				name: 'file',
				header: { token: this.tokenValue },
				success: (uploadFileRes) => {
					let path = JSON.parse(uploadFileRes.data);
					this.logo_value.push({
						url: path.data.fullurl,
						fullurl: path.data.url
					});
				}
			});
		},

		//图片删除
		delIMG(e, type) {
			this.logo_value = [];
		},

		getClose() {
			this.addressShow = false;
		},

		getsubMap(val) {
			this.addressShow = false;
			if (val.location) {
				const location = val.location;
				this.baseFormData.lat = location[0];
				this.baseFormData.lng = location[1];
			} else {
				this.baseFormData.lat = val.latitude;
				this.baseFormData.lng = val.longitude;
			}
			this.baseFormData.address = val.address;
		},

		openAddress() {
			this.$refs.addressRef.show = true;
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.flashOpen-main {
	box-sizing: border-box;
	padding: 30rpx;

	.flashOpen-sub {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #f3f3f3;
		color: #444;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		border: 1px #dbdbdb solid;
	}

	.active {
		background-color: rgb(41, 121, 255);
		color: #fff;
		border: none;
	}

	.regionBox {
		height: 35px;
		line-height: 35px;
		border: 1px #eaeaea solid;
		border-radius: 4px;
		padding-left: 10px;
	}

	.address {
		display: flex;
		align-items: center;
	}
}
</style>
